<template>
  <div class="layout_upBill padding-20">
    <!-- <div class="row">
            <label>客 户 姓 名：</label>
            <input type="tel" v-model="detail.user_name" readonly />
        </div>
        <div class="row">
            <label>付 款 方 式：</label>
            <input type="tel" v-model="detail.payment" readonly />
        </div>
        <div class="row">
            <label>升单消费金额：</label>
            <input type="tel" v-model="up_total_price" />
        </div>
        <div class="row">
            <label>升单扣除杂费金额：</label>
            <input type="tel" v-model="up_all_price" />
        </div>
        <div class="row">
            <label>消费总金额：</label>
            <input type="tel" v-model="total_price" readonly />
        </div>
        <div class="row">
            <label>扣除杂费金额：</label>
            <input type="tel" v-model="all_price" readonly />
    </div>-->
    <!-- 1.8.7 begin -->
    <div class="title-div">
      <span class="title-icon"></span>
      <span class="title-info">订单信息</span>
    </div>
    <div class="row">
      <label>流 水 单 号：</label>
      <input type="tel" v-model="order_sn" readonly />
    </div>
    <div class="row">
      <label>报 单 类 型：</label>
      <span style="color: #000;">{{form_type==0?'美美咖报单':'传统报单'}}</span>
    </div>
    <div class="row">
      <label>消费总金额：</label>
      <input type="tel" v-model="total_price" readonly />
    </div>
    <!-- <div class="row">
            <label>奖励总金额：</label>
            <input type="tel" v-model="all_price" readonly />
    </div>-->
    <div class="row">
      <label>杂费总金额：</label>
      <input type="tel" v-model="nums" readonly />
    </div>
    <div class="row">
      <label>升单消费金额：</label>
      <input
        type="tel"
        placeholder="请输入升单的消费金额"
        v-model="up_total_price"
        @change="moneyRE(up_total_price,'up_total_price')"
      />
    </div>
    <!-- <div class="row">
            <label>升单扣除杂费：</label>
            <input type="tel" v-model="up_all_price" @change="moneyRE(up_all_price,'up_all_price')"/>
    </div>-->
    <!-- 付款方式 -->
    <div class="title-div">
      <span class="title-icon"></span>
      <span class="title-info">付款方式</span>
    </div>
    <div class="row">
      <!-- <label>付 款 方 式：</label> -->
      <div class="right paddingsx">
        <cube-checkbox-group v-model="paySelected">
          <div>
            <cube-checkbox option="3" v-if="settlement_type == 0">
              <i>线上收款</i>
            </cube-checkbox>
            <cube-checkbox :option="{disabled: true}" v-if="settlement_type == 1">
              <i>线上收款</i>
            </cube-checkbox>
            <cube-input
              v-if="pay003"
              v-model="online_money"
              @change="moneyRE(online_money,'online_money')"
              placeholder="该金额为线上收款平台收款金额"
            ></cube-input>
          </div>
          <!-- <div>
            <cube-checkbox option="3">
              <i>线上收款</i>
            </cube-checkbox>
            <cube-input
              v-if="pay003"
              v-model="online_money"
              @change="moneyRE(online_money,'online_money')"
              placeholder="该金额为线上收款平台收款金额"
            ></cube-input>
          </div>-->

          <div>
            <cube-checkbox option="1">
              <i>现&emsp;&emsp;金</i>
            </cube-checkbox>
            <cube-input
              v-if="pay001"
              v-model="own_money"
              @change="moneyRE(own_money,'own_money')"
              placeholder="该金额为医院POS机收款金额"
            ></cube-input>
          </div>
          <div>
            <cube-checkbox option="2">
              <i>分&emsp;&emsp;期</i>
            </cube-checkbox>
            <cube-input
              v-if="pay002"
              v-model="stage_money"
              @change="moneyRE(stage_money,'stage_money')"
              placeholder="该金额为医院贷款金额"
            ></cube-input>
          </div>
          <div class="relative" v-if="gold_status==1">
            <cube-checkbox option="4">
              <i>金&emsp;&emsp;币</i>
            </cube-checkbox>
            <div v-if="pay004">
              <span class="jybspan">当前可用金币{{user_gold}}</span>
              <cube-input
                @change="change_moneys()"
                v-model="gold_coin"
                placeholder="请输入使用的金币数量，金币无奖励"
              ></cube-input>
              <div class="yzmdiv">
                <cube-input style="width:60%" v-model="code" placeholder="请输入获取的验证码"></cube-input>
                <span @click="sendCode()" :class="{ 'disableds': isActive }" class="yzm">{{codeTxt}}</span>
              </div>
            </div>
          </div>
        </cube-checkbox-group>
      </div>
    </div>
    <div class="row">
      <label>升单杂费金额：</label>
      <input
        type="tel"
        placeholder="请输入升单的杂费金额"
        v-model="up_all_price"
        @change="moneyRE(up_all_price,'up_all_price')"
      />
    </div>
    <div class="row" v-if="zfpaydiv">
      <label>杂费付款方式：</label>
      <div>
        <cube-radio-group :horizontal="true">
          <cube-radio v-if="pay003" option="线上收款" v-model="zfpay"></cube-radio>
          <cube-radio v-if="pay001" option="现金" v-model="zfpay"></cube-radio>
          <cube-radio v-if="pay002" option="分期" v-model="zfpay"></cube-radio>
        </cube-radio-group>
      </div>
    </div>
    <div class="row" v-if="form_type==0">
      <label>奖励总金额：</label>
      <input type="tel" v-model="all_price" readonly />
    </div>
    <div class="row" v-if="form_type!=0">
      <label>奖励金额（无补贴）：</label>
      <input style="width:40%" type="tel" v-model="all_price" readonly />
    </div>
    <!-- <div class="row">
            <label>奖励总金额：</label>
            <input type="tel" v-model="all_price" readonly />
    </div>-->
    <div class="title-div">
      <span class="title-icon"></span>
      <span class="title-info">上传照片</span>
    </div>
    <div class="uploadMoudle">
      <!-- <p>上传图片（最多上传3张）：</p> -->
      <cube-upload
        :action="action"
        :max="3"
        @files-added="filesAddedOrder"
        @file-success="fileSuccessOrder"
        @file-removed="fileRemovedOrder"
      />
    </div>
    <!-- 1.8.7 end -->
    <div class="up-bill">
      <button @click="sureEdit">提交</button>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import api from "../../assets/js/api";
export default {
  name: "upBill",
  data() {
    return {
      order_sn: "",
      detail: {},
      all_price: "",
      total_price: "",
      up_all_price: null,
      up_total_price: "",
      hospital: null,
      paySelected: [], //选中付款方式
      pay001: false, //现金flag
      pay002: false, //分期flag
      pay003: false, //线上收款flag
      zfpay: "0", //杂费付款方式
      zfpaydiv: false, //杂费付款方式显影
      online_money: null, //线上收款
      own_money: null, //现金
      stage_money: null, //分期
      accountOpenStatus: null, //开户状态， 0未开户，1.待审核 2：开户成功 3：开户失败
      currentReimbursementRatio: null, //美美咖报单回款比率
      normalReimbursementRatio: null, //传统报单回款比率
      img: "", //流水单图片 最多上传三张
      //上传组件使用
      action: {
        // 正式服
        target: "https://act.yuepinyuemei.com/api/upload/img",
        data: {
          dirPath: "order"
        }
      },
      form_type: null,
      paymentIdOptions: [
        {
          label: "现金",
          value: 1,
          id: "own_money"
        },
        {
          label: "分期",
          value: 2,
          id: "stage_money"
        },
        {
          label: "线上收款",
          value: 3,
          id: "online_money"
        }
      ],
      // 1.8.9
      codeTxt: "获取验证码",
      isActive: false,
      codeNum: 60,
      gold_status: 0, // 是否支持金币抵扣0否1是
      pay004: false, //金银币flag
      user_gold: 0, //用户账户的金币数量
      jlzje: 0, //奖励总金额
      gold_coin: null, //使用金币
      code: null, //验证码
      o_tel: null,
      nums: 0 ,//杂费总金额
      settlement_type:0,
    };
  },
  created() {
    this.order_sn = location.hash.split(":")[1];
    console.log("流水单sn =>", this.order_sn);
    this.form_type = location.hash.split(":")[2];
    this.o_tel = location.hash.split(":")[3];
    this.nums = location.hash.split(":")[4];
    this.settlement_type = location.hash.split(":")[5];
    console.log(this.settlement_type)
  },
  mounted() {
    this.axios.defaults.baseURL = api;
    this.getBilldetail();
  },
  components: {},
  props: {},
  watch: {
    // 监听付款方式 修改贷款平台默认值 （4.18隐藏掉）
    up_total_price: function(newVal, oldVal) {
      if (newVal) {
        // newVal = Number(newVal.replace(/\D+/, ""));
        newVal = Number(newVal);
        this.up_total_price = newVal;
        let total_price = parseFloat(this.detail.total_price);
        this.total_price = total_price + parseFloat(newVal);
      } else {
        this.total_price = this.detail.total_price;
      }
      // setTimeout(() =>{
      //     if(Number(this.up_total_price) - Number(this.up_all_price) > 0){
      //         this.zfpaydiv = true
      //     }else{
      //         this.zfpaydiv = false
      //     }
      // },800)
    },
    up_all_price: function(newVal, oldVal) {
      // 升单界面的奖励总金额 = 原奖励总金额 + （消费金额 - 金币 - 杂费）
      let xjjjz =
        Number(this.up_total_price) -
        Number(this.gold_coin) -
        Number(this.up_all_price);
      if (newVal) {
        // newVal = Number(newVal.replace(/\D+/, ""));
        newVal = Number(newVal);
        this.up_all_price = newVal;
        let all_price = parseFloat(this.detail.all_price);
        // this.all_price = all_price + parseFloat(newVal);
        this.all_price = all_price + xjjjz;
      } else {
        this.all_price = this.detail.all_price;
      }
      setTimeout(() => {
        // if(Number(this.up_total_price) - Number(this.up_all_price) > 0){
        //     this.zfpaydiv = true
        // }else{
        //     this.zfpaydiv = false
        // }
        // if(newVal>0){
        //     this.zfpaydiv = false
        // }else{
        //     this.zfpaydiv = true
        // }
      }, 800);
    },
    // 付款方式判断
    paySelected(e) {
      this.zfpay = null;
      if (e.indexOf("1") != -1) {
        this.pay001 = true;
      } else {
        this.pay001 = false;
      }
      if (e.indexOf("2") != -1) {
        this.pay002 = true;
      } else {
        this.pay002 = false;
      }
      if (e.indexOf("3") != -1) {
        this.pay003 = true;
      } else {
        this.pay003 = false;
      }
      if (e.indexOf("4") != -1) {
        this.pay004 = true;
      } else {
        this.pay004 = false;
      }
    },
    // 判断付款方式勾选进行数据重置
    pay001(e) {
      if (!e) {
        this.own_money = null;
      }
    },
    pay002(e) {
      if (!e) {
        this.stage_money = null;
      }
    },
    pay003(e) {
      if (!e) {
        this.online_money = null;
      }
    }
  },
  computed: {},
  methods: {
    // 金银币chang事件
    change_moneys() {
      this.jlzje = this.total_price - this.orderAmount - this.gold_coin;
      if (this.jlzje >= 0) {
        this.jlzje = this.total_price - this.orderAmount - this.gold_coin;
      } else {
        this.jlzje = 0;
      }
      if (this.gold_coin > this.user_gold) {
        this.gold_coin = 0;
      }
      if (this.gold_coin) {
        this.gold_coin = parseInt(this.gold_coin);
      } else {
        this.gold_coin = 0;
      }
      let xjjjz =
        Number(this.up_total_price) -
        Number(this.gold_coin) -
        Number(this.up_all_price);
      let ap = Number(this.detail.all_price);
      this.all_price = ap + xjjjz;
    },
    //获取方法
    codeFn() {
      let data = {
        username: this.o_tel
      };
      this.axios
        .post("/api/butler/send_gold_code", data)
        .then(msg => {
          if (msg.data.code == 200) {
            Toast({
              message: "提交成功",
              position: "bottom",
              duration: 2000
            });
            console.log("msg", msg);
          } else if (msg.data.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            Toast({
              message: msg.data.msg,
              position: "bottom",
              duration: 2000
            });
          }
        })
        .catch(error => {
          load.hide();
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },
    // 获取验证码
    sendCode() {
      let that = this;
      this.codeFn();
      let times = setInterval(function() {
        if (that.codeNum) {
          that.codeNum--;
          that.isActive = true;
          that.codeTxt = that.codeNum + "s重新发送";
          console.log(123);
        } else {
          that.codeNum = 6;
          that.codeTxt = "重发验证码";
          that.isActive = false;
          console.log(321);
          clearInterval(times);
        }
      }, 1000);
    },
    //图片上传相关操作
    filesAddedOrder(files) {
      //消费凭证
      let hasIgnore = false;
      const maxSize = 20 * 1024 * 1024; // 20M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore &&
        this.$createToast({
          type: "warn",
          time: 1000,
          txt: "图片上传失败，不能大于20M"
        }).show();
    },
    fileSuccessOrder(file) {
      this.img += file.response.data.url + "#";
    },
    //图片上传 手动删除
    fileRemovedOrder(file) {
      let curImg = this.img;
      let removeFileUrl = file.response.data.url;

      if (curImg && removeFileUrl) {
        let picArray = curImg.split("#");
        if (picArray) {
          console.log("删除前的数组为", picArray);
          let index = picArray.indexOf(removeFileUrl);
          picArray.splice(index, 1);
          console.log("删除后的数组为", picArray);

          curImg = picArray.join("#");
          console.log("图片上传地址删除后", curImg);
          this.img = curImg;
        }
      }
    },
    // 金额整数数校验
    moneyRE(num, str) {
      if (Number(num) < 0 || isNaN(num)) {
        this[str] = 0;
      } else {
        if (num) {
          this[str] = parseInt(num);
        } else {
          this[str] = 0;
        }
      }
      if (this.up_all_price > 0) {
        this.zfpaydiv = true;
      } else {
        this.zfpaydiv = false;
      }
      let xjjjz =
        Number(this.up_total_price) -
        Number(this.gold_coin) -
        Number(this.up_all_price);
      let ap = Number(this.detail.all_price);
      this.all_price = ap + xjjjz;
    },
    //获取医院是否开户状态
    getHospitalInfo() {
      this.axios
        .post("api/butler/hospital_info", {
          hospital_id: this.hospital
        })
        .then(res => {
          // console.log(res.data.data)
          let resData = res.data.data;
          this.accountOpenStatus = resData.accountOpenStatus;
          this.currentReimbursementRatio = resData.currentReimbursementRatio;
          this.normalReimbursementRatio = resData.normalReimbursementRatio;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getBilldetail() {
      if (!this.order_sn) {
        return false;
      }
      var that = this;
      let load = this.loading("加载中");
      load.show();
      this.axios
        .post("/api/butler/water_detail", {
          order_sn: this.order_sn
        })
        .then(res => {
          load.hide();
          if (res.data.code == 200) {
            this.detail = res.data.data;
            this.all_price = this.detail.all_price;
            this.total_price = this.detail.total_price;
            this.hospital = this.detail.hospital_id; //医院id
            this.form_type = this.detail.form_type;
            this.getHospitalInfo();
            if (Number(this.up_total_price) - Number(this.up_all_price) > 0) {
              this.zfpaydiv = true;
            } else {
              this.zfpaydiv = false;
            }
            this.user_gold = this.detail.user_gold; // 账户金币
            // this.gold_status = res.data.gold_status;//是否支持金币抵扣
            if (this.user_gold) {
              this.gold_status = 1;
            } else {
              this.gold_status = 0;
            }
          } else if (res.data.code == 250) {
            this.toastLib.commonToast("登录过期，请重新登陆");
            this.$router.push("/login");
            return false;
          } else {
            this.toastLib.commonToast(res.data.msg);
            return false;
          }
        })
        .catch(error => {
          load.hide();
          this.toastLib.commonToast("请求失败，请稍后重试");
        });
    },

    //提交项目
    sureEdit() {
      let jez, xfz, xj, gxje, fkfs, sdc;
      // 录入的金额之和
      jez =
        Number(this.online_money) +
        Number(this.own_money) +
        Number(this.stage_money) +
        Number(this.gold_coin);
      // 消费总金额
      xfz = Number(this.total_price);
      // 消费总金额-扣除杂费金额
      xj = Number(this.total_price) - Number(this.orderAmount);
      //升单消费金额-升单扣除杂费金额
      sdc = Number(this.up_total_price) - Number(this.up_all_price);

      //获取勾选付款方式填写的金额
      this.paymentIdOptions.forEach(e => {
        if (e.label == this.zfpay) {
          fkfs = e.label;
          gxje = this[e.id];
        }
      });
      // console.log("gxje",gxje)
      // console.log("sdc",sdc)
      if (this.up_all_price === "" || this.up_total_price == "") {
        this.toastLib.commonToast("请输入升单信息");
        return false;
      } else if (
        this.accountOpenStatus == 2 &&
        this.form_type == 0 &&
        jez > 0 &&
        Number(this.currentReimbursementRatio) == 0
      ) {
        Toast({
          message: `医院回款比率获取异常，请稍后再试`,
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (
        this.accountOpenStatus == 2 &&
        this.form_type == 1 &&
        jez > 0 &&
        Number(this.normalReimbursementRatio) == 0
      ) {
        Toast({
          message: `医院回款比率获取异常，请稍后再试`,
          position: "bottom",
          duration: 2000
        });
        return false;
      }
      // if(this.accountOpenStatus != 2&&jez > 0){
      //     Toast({
      //         message: `当前医院未开户，不允许使用线上收款方式`,
      //         position: "bottom",
      //         duration: 2000
      //     });
      //     return false;
      // }else
      else if (this.pay003 && !this.online_money) {
        Toast({
          message: "已勾选付款方式金额为空，请填写后再提交",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (this.pay001 && !this.own_money) {
        Toast({
          message: "已勾选付款方式金额为空，请填写后再提交",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (this.pay002 && !this.stage_money) {
        Toast({
          message: "已勾选付款方式金额为空，请填写后再提交",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (this.zfpaydiv && !this.zfpay) {
        Toast({
          message: "当前流水单存在杂费，请选择杂费付款方式",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (jez != Number(this.up_total_price)) {
        Toast({
          message: "各付款方式金额之和不等于升单消费总金额，请重新输入",
          position: "bottom",
          duration: 2000
        });
        return false;
      }
      // if(gxje<sdc){
      //     Toast({
      //         message: `${fkfs}填写的金额小于杂费金额，请重新输入`,
      //         position: "bottom",
      //         duration: 2000
      //     });
      //     return false;
      // }
      else if (gxje < this.up_all_price) {
        Toast({
          message: `${fkfs}填写的金额小于杂费金额，请重新输入`,
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (Number(this.up_all_price) > Number(this.up_total_price)) {
        Toast({
          message: `升单扣除杂费金额不能大于升单消费金额`,
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (
        !(
          this.paySelected.length == 1 && this.paySelected.indexOf("3") != -1
        ) &&
        this.img.trim() == "" &&
        this.paymentId != 3
      ) {
        Toast({
          message: `请上传图片`,
          position: "bottom",
          duration: 2000
        });
        return false;
      }
      let extraType = "0";
      switch (this.zfpay) {
        case "现金":
          extraType = "1";
          break;
        case "分期":
          extraType = "2";
          break;
        case "线上收款":
          extraType = "3";
          break;
      }
      if (this.own_money == null) {
        this.own_money = 0;
      }
      if (this.stage_money == null) {
        this.stage_money = 0;
      }
      if (this.online_money == null) {
        this.online_money = 0;
      }
      let imgs = this.img.substring(0, this.img.length - 1);
      let data = {
        order_sn: String(this.order_sn),
        all_price: String(this.all_price),
        total_price: String(this.total_price),
        own_money: String(this.own_money),
        stage_money: String(this.stage_money),
        online_money: String(this.online_money),
        extra_type: String(extraType),
        payment_ids: this.paySelected,
        img: imgs,
        // v1.8.9
        code: String(this.code),
        gold_coin: String(this.gold_coin)
      };
      this.axios
        .post("/api/butler/water_up", data)
        .then(res => {
          // load.hide();
          if (res.data.code == 200) {
            this.$router.push("/billdetail:" + this.order_sn);
          } else if (res.data.code == 250) {
            this.toastLib.commonToast("登录过期，请重新登陆");
            this.$router.push("/login");
            return false;
          } else {
            this.toastLib.commonToast(res.data.msg);
            return false;
          }
        })
        .catch(error => {
          load.hide();
          this.toastLib.commonToast("请求失败，请稍后重试");
        });
    }
  }
};
</script>

<style lang="less" scoped>
.layout_upBill {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 17px;
  color: #666;
  text-align: center;

  .row {
    min-height: 48px;
    line-height: 48px;
    background-color: #fff;
    text-align: left;
    padding-left: 0 !important;
    border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
    position: relative;
  }
  .row input {
    height: 46px;
    margin-bottom: 2px;
    background-color: #fff;
  }

  .up-bill {
    button {
      margin-top: 100px;
      width: 60%;
      height: 40px;
    }
  }
}
.disableds {
  pointer-events: none;
}
</style>
<style lang="less">
.layout_upBill {
  .select-icon {
    display: block;
    font-size: 20px;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99;
  }
  .orderDate {
    width: 50%;
    height: 50px;
    line-height: 50px;
    display: block;
    position: absolute;
    top: 0;
    left: 110px;
  }
  .tip {
    color: #ccc;
    margin-top: -25px;
  }
  .cube-select {
    border: none;
    display: inline-block;
    width: 70%;
    .cube-select-icon {
      display: none !important;
    }
    &::after {
      border: none;
    }
  }
  .cube-radio-group[data-horz="true"]::after {
    border: none !important;
  }
  .border-right-1px {
    border-right: 0 !important;
  }
  .type {
    display: flex;
    .cube-radio-group {
      min-width: 60%;
    }
  }
  .cube-radio_selected .cube-radio-ui {
    background-color: rgba(255, 137, 169, 1);
  }

  .credit {
    .cube-switch {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
    }
    .cube-switch .cube-switch-input:checked + .cube-switch-ui {
      background-color: #09bb07;
      border-color: #09bb07;
    }
  }
  .check_num {
    .get-msg {
      height: 32px;
      line-height: 32px;
      padding: 0 15px;
      text-align: center;
      border-radius: 16px;
      border: 1px solid rgba(204, 204, 204, 1);
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .uploadMoudle {
    margin-top: 10px;
    background-color: #fff;
    padding: 13px 15px;
  }
  .uploadMoudle p {
    font-size: 16px;
    text-align: left;
    margin-bottom: 13px;
  }

  .jiange {
    width: 100%;
    height: 10px;
    background-color: #f4f4f4;
  }

  .aicon {
    width: 70px;
    height: 30px;
    background-color: #fca3bb;
    border-radius: 0 0 10px 0;
    color: #fff;
    line-height: 30px;
    text-align: center;
  }
}
</style>
<style lang="less" scope>
.paddingsx {
  padding: 4px 0;
}
.cube-checkbox_checked .cube-checkbox-ui i {
  color: #ff89a9 !important;
}
.cube-radio-group[data-horz="true"] .cube-radio-wrap {
  justify-content: flex-start !important;
}
.padding-20 {
  padding: 0 20px;
}
.title-div {
  text-align: left;
  margin-top: 15px;
}
.title-icon {
  display: block;
  width: 4px;
  height: 14px;
  background: #5e7aff;
  border-radius: 2px;
  float: left;
  margin-top: 6px;
}
.title-info {
  font-size: 16px;
  font-weight: 400;
  color: #3a3a3a;
  margin-left: 8px;
}
.jybspan {
  position: absolute;
  top: 0;
  right: 0;
}
.relative {
  position: relative;
}
.yzmdiv {
  position: relative;
  margin: 6px 0;
}
.yzm {
  background: rgb(67, 189, 204);
  position: absolute;
  width: 100px;
  text-align: center;
  top: 0;
  right: 20px;
  color: white;
  border-radius: 4px;
  height: 40px;
  display: inline-block;
  font-size: 14px;
  padding: 0 10px;
  line-height: 40px;
}
.disableds {
  pointer-events: none;
}
</style>

